<template>
    <div class="item-content" style="height:100%;display:flex">

        <div id="balanceChart" style="width:100%;height: 300px"></div>
    </div>
</template>
<script>
import { accountBalanceData } from '@/api/cnaps/dashboard/index'
import { listPageMixin } from '@/libs/listPageMixin'
import echarts from 'echarts';
export default {
    name: 'Balance',
    mixins: [ listPageMixin ],
    data() {
        return {

        }
    },
    mounted() {
        this.drawChat()
        accountBalanceData().then(res => {
            let amountArray = [];
            let timeArray = [];
            if(res.result) {

                amountArray = res.result.map(x => (x.amount / 100).toFixed(2))
                timeArray = res.result.map(x => x.time)
                this.drawChat(timeArray,amountArray)
            }
        })
    },
    methods: {
        drawChat(timeArray,amountArray) {
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        let myChart = echarts.init(document.getElementById("balanceChart"));
        // 指定图表的配置项和数据
        let option = {
            title: {
                text: ''
            },
            // tooltip: {
            //     trigger: 'axis'
            // },
            legend: {},
            toolbox: {
                show: false,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timeArray
            },
            yAxis: {
                type: 'value',
                // axisLabel: {
                //     formatter: '{value}'
                // },
                data: amountArray
            },
            series: [
                {
                    name: '余额',
                    type: 'line',
                    data: amountArray,
                    markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                    },
                    markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                    },
                    smooth: true,
                },
                // {
                //     name: 'Lowest',
                //     type: 'line',
                //     data: amountArray,
                //     markPoint: {
                //     data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                //     },
                //     markLine: {
                //     data: [
                //         { type: 'average', name: 'Avg' },
                //         [
                //         {
                //             symbol: 'none',
                //             x: '90%',
                //             yAxis: 'max'
                //         },
                //         {
                //             symbol: 'circle',
                //             label: {
                //             position: 'start',
                //             formatter: 'Max'
                //             },
                //             type: 'max',
                //             name: '最高点'
                //         }
                //         ]
                //     ]
                //     }
                // }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        }
    }
}
</script>
